<template>
  <div class="firmware-details">
    <el-form ref="form" class="form" :model="form" :rules="rules" label-width="123px" label-position="left">
      <el-row>
        <el-col :span="14">
          <el-form-item label="固件名称" prop="name" class="form-item">
            <el-input v-show="editStatus" v-model="form.name" maxlength="32" minlength="2" show-word-limit></el-input>
            <span v-show="!editStatus">{{ firmwareInfo.name }}</span>
          </el-form-item>
          <el-form-item label="版本号" class="form-item">
            {{ firmwareInfo.version || '-' }}
          </el-form-item>
          <el-form-item label="模块" class="form-item">
            {{ firmwareInfo.efirmwareName || '-' }}
          </el-form-item>
          <el-form-item label="文件大小" class="form-item">
            {{ bytesToMegabytes(firmwareInfo.size) || '-' }}
          </el-form-item>
          <el-form-item label="校验值（MD5）" class="form-item">
            {{ firmwareInfo.sign || '-' }}
          </el-form-item>
          <el-form-item label="更新日志">
            <el-input
              v-show="editStatus"
              v-model="form.description"
              type="textarea"
              maxlength="200"
              show-word-limit></el-input>
            <span v-show="!editStatus">{{ firmwareInfo.description || '-' }}</span>
          </el-form-item>
          <el-form-item label="创建时间">
            {{ firmwareInfo.createTime || '-' }}
          </el-form-item>
          <el-form-item label="编辑时间">
            {{ firmwareInfo.updateTime || '-' }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btn">
      <el-button
        v-show="!editStatus"
        :disabled="rolesCode === 'SALE'"
        type="primary"
        size="14"
        @click="onEdit">编辑固件</el-button>
      <el-button v-show="editStatus" type="primary" size="14" @click="onSubmit">保存</el-button>
      <el-button v-show="editStatus" size="14" @click="onCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getFirmwareInfo, updateFirmwareInfo } from "@/api/product/product-details"
import { mapGetters } from 'vuex'
export default {
  name: 'firmwareDetails',
  data() {
    return {
      form: {
        name: '',
        description: ''
      },
      editStatus: false,
      firmwareId: '', // 当前固件id
      firmwareInfo: '',
      rules: {
        name: [
          { required: true, message: '请输入固件名称', trigger: 'blur' },
          { min: 2, max: 32, message: '请输入规范的固件名称', trigger: 'blur' },
          { validator: this.validateName, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['rolesCode'])
  },
  mounted() {
    this.firmwareId = this.$route.query.firmwareId
    this.getFirmwareInfoFun()
  },
  methods: {
    // 固件名称校验
    validateName(rule, value, callback) {
      const flag = new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5]+$/).test(value)
      if (!flag) {
        callback(new Error('请输入规范的固件名称'))
      } else {
        callback()
      }
    },
    // 字节单位转换为m
    bytesToMegabytes(bytes) {
      const megabytes = parseInt(bytes) / (1024 * 1024)
      return megabytes.toFixed(4) + 'M'
    },
    // 获取固件详情信息
    getFirmwareInfoFun() {
      const params = {
        firmwareId: this.firmwareId
      }
      getFirmwareInfo(params).then((res) => {
        if (res.data.code === 0) {
          this.firmwareInfo = res.data.data
          this.form.name = this.firmwareInfo.name
          this.form.description = this.firmwareInfo.description
        }
      })
    },
    // 编辑固件详情
    onEdit() {
      this.editStatus = true
    },
    // 保存固件详情
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.form, { firmwareId: this.firmwareId })
          updateFirmwareInfo(params).then((res) => {
            this.$message.success('保存成功')
            this.getFirmwareInfoFun()
            this.editStatus = false
          }).catch(err => {
            this.$message.error(err.message)
          })
        } else {
          return false
        }
      })
    },
    // 取消修改
    onCancel() {
      this.$refs['form'].resetFields()
      this.editStatus = false
      this.form.name = this.firmwareInfo.name
    }
  }
}
</script>
<style lang="scss" scoped>
.firmware-details {
  font-size: 14px;
  padding-top: 59px;
  padding-left: 80px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;

  .form-wrap {
    flex-grow: 1;
  }

  .btn {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
